<template>
	<view class="similar-chart">
		<view class="header">
			<view class="name" v-if="type=='owner'">
				企业名称
			</view>
			<view class="num">
				{{chartText}} ({{text}}8名)
				<view class="sort" :class="sort" v-if="isSort" @click="handleSort">
					<view class="triangle up"></view>
					<view class="triangle down"></view>
				</view>
			</view>
			<view class="uni-icon arrow" :class="[{show}]" @click="show=!show">&#xe68d;</view>
		</view>
		<view class="owner-box" v-if="type=='owner'" v-show="show">
			<view class="content">
				<view class="flex-item" :class="[{isSort}]" v-for="(item,index) in dataList" :key="index">
					<view class="col col-1">
						<div class="name">{{item.name}}</div>
					</view>
					<view class="col col-2">
						<view class="index">
							<view class="num">
								{{index+1}}
							</view>
						</view>
						<view class="progress">
							<view class="progress-color" :style="[{width:item.progress+'%'}]"></view>
							<view class="progress-small" v-if="isSort && index < 3"
								:style="[{width:item.progress+'%'}]"></view>
						</view>
					</view>
					<view class="col col-3">
						{{item.value}}%
					</view>
				</view>

				<view class="line">
					<view class="solid"></view>
					<view class="dashed"></view>
					<view class="dashed"></view>
					<view class="dashed"></view>
					<view class="dashed"></view>
					<view class="dashed"></view>
					<view class="dashed"></view>
					<view class="dashed"></view>
					<view class="dashed"></view>
					<view class="dashed"></view>
				</view>
			</view>
		</view>

		<view class="area-box" v-if="type=='area'" v-show="show">
			<view class="content">

				<view class="left">
					<view class="num" v-for="i in 11">
						{{(11-i)*10}}%
					</view>
				</view>
				<view class="right">
					<view class="progress" :class="[{isSort}]" v-for="(item,index) in dataList" :key="index">
						<view class="progress-color" :style="[{height:item.value+'%'}]"></view>
						<view class="progress-name">
							{{item.name}}
						</view>
					</view>

					<view class="line">
						<view class="dashed"></view>
						<view class="dashed"></view>
						<view class="dashed"></view>
						<view class="dashed"></view>
						<view class="dashed"></view>
						<view class="dashed"></view>
						<view class="dashed"></view>
						<view class="dashed"></view>
						<view class="dashed"></view>
						<view class="dashed"></view>
					</view>
				</view>
			</view>
		</view>

		<u-empty v-if="dataList.length==0" mode="data" icon="info-circle" width='50px' height='50px'>
		</u-empty>
	</view>
</template>

<script>
	export default {
		props: {
			type: {
				type: String,
				default: "owner",
			},
			list: {
				type: Array,
				default () {
					return [];
				}
			},
			isSort: {
				type: Boolean,
				default: true, // 是否有排序
			},
			// 文字
			chartText: {
				type: String,
				default: '',
			},
			curNow: {
				type: Number,
				default: '',
			},

		},
		data() {
			return {
				sort: "desc", // 默认降序；asc：升序；desc降序
				item: {
					value: '',
				},
				dataList: [],
				show: true,
				text: "前"
			}
		},
		methods: {
			handleSort() {
				if (this.sort == 'asc') {
					this.sort = 'desc';
					this.text = '前'
				} else if (this.sort == 'desc') {
					this.sort = 'asc';
					this.text = '后'
				}
				this.$emit('change', this.sort);
				// this.init();
			},
			init() {
				if (this.list.length != 0) {
					const max = this.list
						.map(o => o.value)
						.reduce((prev, next) => Math.max(prev, next));

					this.dataList = this.list.map(o => {
						if (max) {
							o.progress = o.value / max * 100;
						} else {
							o.progress = 0;
						}
						return o;
					}).sort((prev, next) => {
						if (this.isSort) {
							if (this.sort == 'asc') {
								return prev.progress - next.progress
							}
							return next.progress - prev.progress
						}
						// return 1;
					})
				} else {
					return []
				}

			}
		},
		mounted() {
			this.init();
		}
	}
</script>

<style lang="scss">
	.similar-chart {
		margin: 0 20rpx;
		background-color: #fff;
		border-radius: 16rpx 16rpx 0 0;
		overflow: hidden;

		.header {
			background-color: #D7E7FC;
			display: flex;
			height: 66rpx;
			align-items: center;
			padding-left: 20rpx;
			font-size: 24rpx;
			color: #333;


			.num {
				flex: 1;
				display: flex;
				align-items: center;
				text-align: center;
				justify-content: center;

				.sort {
					width: 10rpx;
					display: flex;
					flex-direction: column;
					padding: 0 10rpx;
					cursor: pointer;

					.triangle {
						border: 10rpx solid transparent;
					}

					.up {
						border-bottom-color: #BBBBBB;
						margin-bottom: 2rpx;
					}

					.down {
						border-top-color: #BBBBBB;
					}

				}

				.asc {
					.up {
						border-bottom-color: #1D62BE;
					}
				}

				.desc {
					.down {
						border-top-color: #1D62BE;
					}
				}
			}

			.arrow {
				transform: rotate(90deg);
				padding: 0 20rpx;
				cursor: pointer;

				&.show {
					transform: rotate(-90deg);
				}
			}
		}

		.area-box {
			padding-top: 10rpx;

			.content {
				display: flex;
				font-size: 20rpx;
				line-height: 20rpx;
				height: 400rpx;
				padding-top: 20rpx;
				padding-bottom: 124rpx; // 字数*行高+上边距*2

				.left {
					margin-top: -20rpx;
					text-align: right;
					border-right: 1px solid #A9A8AB;
					padding-right: 15rpx;

					.num {
						flex: 1;
						text-align: right;
						font-size: 20rpx;
						line-height: 40rpx;
					}
				}

				.right {
					border-bottom: 1px solid #A9A8AB;
					flex: 1;
					display: flex;
					position: relative;

					.progress {
						flex: 1;
						margin: 0 10rpx;
						position: relative;
						z-index: 10;

						.progress-color {
							position: absolute;
							bottom: 0;
							width: 100%;
							background-color: #1D62BE;
						}

						.progress-name {
							position: absolute;
							top: 100%;
							width: 12rpx;
							padding-top: 10rpx;
							line-height: 26rpx;
						}

						&.isSort {
							&:nth-child(1) {
								.progress-color {
									background-color: #F78C7F;
								}
							}

							&:nth-child(2) {
								.progress-color {
									background-color: #F8A845;
								}
							}

							&:nth-child(3) {
								.progress-color {
									background-color: #F5DE3A;
								}
							}
						}
					}

					.line {
						position: absolute;
						left: 0;
						top: 0;
						bottom: 0;
						right: 0;
						z-index: 1;
						display: flex;
						flex-direction: column;

						.dashed {
							flex: 1;
							border-top: 1px dashed #D9D9D9;
						}
					}
				}
			}
		}

		.owner-box ::v-deep {

			.content {
				padding: 20rpx;
				position: relative;
				font-size: 14px;

				.line {
					position: absolute;
					z-index: 1;
					left: 260rpx;
					top: 20rpx;
					bottom: 20rpx;
					right: 150rpx;
					display: flex;
					justify-content: space-between;

					.solid {
						height: 100%;
						border-left: 1px solid #A9A8AB;
					}

					.dashed {
						height: 100%;
						border-left: 1px dashed #dcdbdd;
					}
				}

				.flex-item {
					display: flex;
					align-items: center;
					position: relative;
					z-index: 10;
					padding: 4rpx 0;

					.col-1 {
						width: 210rpx;

						.name {
							white-space: nowrap;
							text-overflow: ellipsis;
							overflow: hidden;
							font-size: 20rpx;
						}
					}

					.col-2 {
						flex: 1;
						display: flex;
						align-items: center;

						.index {
							width: 30rpx;
							font-size: 20rpx;
							text-align: center;
							position: relative;
							z-index: 2;
						}

						.progress {
							flex: 1;
							height: 14rpx;
							position: relative;
							z-index: 1;

							.progress-color {
								height: 14rpx;
								background-color: #BFD8FF;
							}
						}
					}

					.col-3 {
						width: 100rpx;
						text-align: right;
					}

					&.isSort {
						&:nth-child(1) {
							.col-1 {
								.name {
									color: #F78C7F;
								}
							}

							.col-2 {
								.index {
									.num {
										width: 32rpx;
										height: 32rpx;
										line-height: 32rpx;
										border-radius: 50%;
										border: 4rpx solid #E7E4E4;
										background-color: #F78C7F;
										color: #fff;
									}
								}

								.progress {
									height: 28rpx;
									position: relative;

									.progress-color {
										height: 28rpx;
										background-color: #F78C7F;
										border-radius: 0 14rpx 14rpx 0;
									}

									.progress-small {
										position: absolute;
										bottom: -8rpx;
										left: 0;
										height: 4rpx;
										background-color: #F78C7F;
									}
								}
							}

							.col-3 {
								color: #F78C7F;
							}
						}

						&:nth-child(2) {
							.col-1 {
								.name {
									color: #F8A845;
								}
							}

							.col-2 {
								.index {
									.num {
										width: 32rpx;
										height: 32rpx;
										line-height: 32rpx;
										border-radius: 50%;
										border: 4rpx solid #E7E4E4;
										background-color: #F8A845;
										color: #fff;
									}
								}

								.progress {
									height: 28rpx;
									position: relative;

									.progress-color {
										height: 28rpx;
										background-color: #F8A845;
										border-radius: 0 14rpx 14rpx 0;
									}

									.progress-small {
										position: absolute;
										bottom: -8rpx;
										left: 0;
										height: 4rpx;
										background-color: #F8A845;
									}
								}
							}

							.col-3 {
								color: #F8A845;
							}
						}

						&:nth-child(3) {
							.col-1 {
								.name {
									color: #F5DE3A;
								}
							}

							.col-2 {
								.index {
									.num {
										width: 32rpx;
										height: 32rpx;
										line-height: 32rpx;
										border-radius: 50%;
										border: 4rpx solid #E7E4E4;
										background-color: #F5DE3A;
										color: #fff;
									}
								}

								.progress {
									height: 28rpx;
									position: relative;

									.progress-color {
										height: 28rpx;
										background-color: #F5DE3A;
										border-radius: 0 14rpx 14rpx 0;
									}

									.progress-small {
										position: absolute;
										bottom: -8rpx;
										left: 0;
										height: 4rpx;
										background-color: #F5DE3A;
									}
								}
							}

							.col-3 {
								color: #F5DE3A;
							}
						}
					}
				}
			}
		}
	}
</style>
